<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>CSS利用元素特殊的类型实现，图片大小不一时，垂直水平居中</title>
	<link rel="stylesheet" href="./style.css">
</head>

<body>
	<dl>
		<dt><img src="img/1.jpg" alt="图片加载失败！"><span></span></dt>
		<dd>跑步机</dd>
		<dd>￥888</dd>
	</dl>
	<dl>
		<dt><img src="img/2.jpg" alt="图片加载失败！"><span></span></dt>
		<dd>跑鞋</dd>
		<dd>￥520</dd>
	</dl>
	<dl>
		<dt><img src="img/3.jpg" alt="图片加载失败！"><span></span></dt>
		<dd>自行车</dd>
		<dd>￥2520</dd>
	</dl>
	<dl>
		<dt><img src="img/4.jpg" alt="图片加载失败！"><span></span></dt>
		<dd>运动套装</dd>
		<dd>￥220</dd>
	</dl>
	<dl>
		<dt><img src="img/1.jpg" alt="图片加载失败！"><span></span></dt>
		<dd>跑步机</dd>
		<dd>￥888</dd>
	</dl>
	<dl>
		<dt><img src="img/2.jpg" alt="图片加载失败！"><span></span></dt>
		<dd>跑鞋</dd>
		<dd>￥520</dd>
	</dl>
	<dl>
		<dt><img src="img/3.jpg" alt="图片加载失败！"><span></span></dt>
		<dd>自行车</dd>
		<dd>￥2520</dd>
	</dl>
	<dl>
		<dt><img src="img/4.jpg" alt="图片加载失败！"><span></span></dt>
		<dd>运动套装</dd>
		<dd>￥220</dd>
	</dl>
	<dl>
		<dt><img src="img/1.jpg" alt="图片加载失败！"><span></span></dt>
		<dd>跑步机</dd>
		<dd>￥888</dd>
	</dl>
	<dl>
		<dt><img src="img/2.jpg" alt="图片加载失败！"><span></span></dt>
		<dd>跑鞋</dd>
		<dd>￥520</dd>
	</dl>
	<dl>
		<dt><img src="img/3.jpg" alt="图片加载失败！"><span></span></dt>
		<dd>自行车</dd>
		<dd>￥2520</dd>
	</dl>
	<dl>
		<dt><img src="img/4.jpg" alt="图片加载失败！"><span></span></dt>
		<dd>运动套装</dd>
		<dd>￥220</dd>
	</dl>
	<dl>
		<dt><img src="img/1.jpg" alt="图片加载失败！"><span></span></dt>
		<dd>跑步机</dd>
		<dd>￥888</dd>
	</dl>
	<dl>
		<dt><img src="img/2.jpg" alt="图片加载失败！"><span></span></dt>
		<dd>跑鞋</dd>
		<dd>￥520</dd>
	</dl>

</body>

</html>